<mat-toolbar color="primary">
  <h1 class="mat-headline">
    {{ 'Blocks' | translate }}
  </h1>
</mat-toolbar>
<div style="margin:10px;">
  <div class="table-container mat-elevation-z1" *ngIf="blocks$ | async as blocks; else loading">
    <table mat-table [dataSource]="blocks" style="border:none;">
      <ng-container *ngIf="columnHeaders$ | async as blocksColumns">
        <tr mat-header-row *matHeaderRowDef="blocksColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: blocksColumns;"></tr>
      </ng-container>
      <ng-container matColumnDef="block_num">
        <th mat-header-cell *matHeaderCellDef>{{ 'Block Number' | translate }}</th>
        <td mat-cell *matCellDef="let block">
          <a [routerLink]="['/blocks',block.block_num]">{{block.block_num}}</a>
        </td>
      </ng-container>
      <ng-container matColumnDef="timestamp">
        <th mat-header-cell *matHeaderCellDef>{{ 'Timestamp' | translate }}</th>
        <td mat-cell *matCellDef="let block">
          {{block.timestamp | amFromUtc | date:'MMM d, y, h:mm:ss.SSS a'}}
        </td>
      </ng-container>
      <ng-container matColumnDef="producer">
        <th mat-header-cell *matHeaderCellDef>{{ 'Producer' | translate }}</th>
        <td mat-cell *matCellDef="let block">
          <a [routerLink]="['/producers',block.producer]">{{block.producer}}</a>
        </td>
      </ng-container>
      <ng-container matColumnDef="transactions">
        <th mat-header-cell *matHeaderCellDef>{{ 'Transactions' | translate }}</th>
        <td mat-cell *matCellDef="let block">
          {{block.transactions.length}}
        </td>
      </ng-container>
    </table>
    <mat-paginator [pageIndex]="pageIndex" [pageSize]="pageSize" [length]="total" (page)="onPaging($event)"></mat-paginator>
  </div>
  <ng-template #loading>
    <app-spinner></app-spinner>
  </ng-template>
</div>
